<template>
	<view class="pairingLayout pageBg">
		<view class="select">
			<view class="one">
				<uni-data-select class="star1" v-model="star1" :localdata="rangestar" @change="changeStarOne">
				</uni-data-select>
				<uni-data-select class="star1" v-model="gender1" :localdata="rangegender"
					@change="changeGenderOne"></uni-data-select>
			</view>

			<view class="vs"> vs </view>
			<view class="two">
				<uni-data-select class="star2" v-model="star2" :localdata="rangestar"
					@change="changeStarTwo"></uni-data-select>
				<uni-data-select class="star2" v-model="gender2" :localdata="rangegender"
					@change="changeGenderTwo"></uni-data-select>
			</view>

		</view>

		<view class="but">
			<button type="primary" size="mini" plain="true" @click="getPairing">查询</button>
		</view>


		<view class="center">
			<view class="synthe">
				<view class="index">
					<text>亲情配对指数</text>
					<uni-rate readonly touchable :value="pairingData.affection" size="22" />
				</view>
				<view class="index">
					<text>爱情配对指数 :</text>
					<uni-rate readonly touchable :value="pairingData.love" size="22" />
				</view>
				<view class="index">
					<text>婚姻配对指数 :</text>
					<uni-rate readonly touchable :value="pairingData.married" size="22" />
				</view>
				<view class="index">
					<text>天长地久指数 :</text>
					<uni-rate readonly touchable :value="pairingData.forever" size="22" />
				</view>
				<view class="index">
					<text>两情相悦指数 :</text>
					<uni-rate readonly touchable :value="pairingData.lqxy" size="22" />
				</view>
				<view class="index">
					<text>友情配对指数 :</text>
					<uni-rate readonly touchable :value="pairingData.friendship" size="22" />
				</view>
			</view>

			<view class="dian">
				<view class="left">
					<view>星座配对比重 :<text> {{pairingData.proportion}}</text></view>
					<view>星座速配点评 :<text>{{pairingData.review}}</text></view>
				</view>

				<view class="round">
					<view class="roundmin">
						<text class="fenshu">{{pairingData.match}}</text>
						<text class="day">综合指数</text>
					</view>
				</view>
			</view>

			<view>
				<uni-section class="mb-10" title="缘分解析 " type="circle" padding="0 10px 5px 10px">
					{{pairingData.predestination}}
				</uni-section>
				<uni-section class="mb-10" title="恋爱建议 " type="circle" padding="0 10px 5px 10px">
					{{pairingData.suggest}}
				</uni-section>
				<uni-section class="mb-10" title="配对示例 " type="circle" padding="0 10px 5px 10px">
					{{pairingData.match_case}}
				</uni-section>

				<uni-section class="mb-10" title=" 其它建议" type="circle" padding="0 10px 5px 10px">
					{{pairingData.info}}
				</uni-section>
				<uni-section class="mb-10" title="注意事项 " type="circle" padding="0 10px 5px 10px">
					{{pairingData.attention}}
				</uni-section>
			</view>
		</view>

		<view class="safe-area-inset-bottom"></view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		pairingList
	} from "@/api/apis.js";

	const star1 = ref('baiyang')
	const star2 = ref('baiyang')
	const gender1 = ref(1)
	const gender2 = ref(0)

	const query = ref({
		star1: 'baiyang',
		gender1: '1',
		star2: 'baiyang',
		gender2: '0'
	})

	const pairingData = ref({})

	const rangegender = ref([{
			value: 0,
			text: "女"
		},
		{
			value: 1,
			text: "男"
		}

	])

	const rangestar = ref([{
			value: 'baiyang',
			text: "白羊座"
		}, {
			value: 'jinniu',
			text: "金牛座"
		},
		{
			value: 'shuangzi',
			text: "双子座"
		},
		{
			value: 'juxie',
			text: "巨蟹座"
		},
		{
			value: 'shizi',
			text: "狮子座"
		},
		{
			value: 'chunv',
			text: "处女座"
		},
		{
			value: 'tiancheng',
			text: "天秤座"
		},
		{
			value: 'sheshou',
			text: "射手座"
		},
		{
			value: 'mojie',
			text: "摩羯座"
		},
		{
			value: 'tianxie',
			text: "天蝎座"
		},
		{
			value: 'shuiping',
			text: "水瓶座"
		},
		{
			value: 'shuangyu',
			text: "双鱼座"
		},
	])

	const changeStarOne = e => {
		query.value.star1 = e
	}
	const changeGenderOne = e => {
		query.value.gender1 = e
	}
	const changeStarTwo = e => {
		query.value.star2 = e
	}
	const changeGenderTwo = e => {
		query.value.gender2 = e

	}

	onLoad(() => {
		queryPairingData()
	})
	//获取配对数据
	const queryPairingData = async () => {
		uni.showLoading({
			title: "加载中"
		})
		const res = await pairingList(query.value)
		if (res.showapi_res_code === 0) {
			pairingData.value = res.showapi_res_body
			uni.hideLoading();
		}

	}

	//查询
	const getPairing = () => {
		queryPairingData()
	}
</script>

<style lang="scss" scoped>
	.pairingLayout {
		padding-top: 30rpx;

		.select {
			display: flex;
			justify-content: space-around;

			.one {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: column;
				font-size: 60rpx;

				.star1 {
					font-size: 40px;
					width: 200rpx;
				}

			}

			.vs {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 60rpx;
				color: #ff0000;
			}

			.two {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: column;

				.star2 {
					font-size: 40px;
					width: 200rpx;
				}
			}
		}

		.but {
			display: flex;
			justify-content: center;
			align-items: center;


			button {
				border-color: #baecec;
				color: #000;
				font-size: 30rpx;
			}
		}


		.center {
			.synthe {
				display: flex;
				flex-direction: column; //换行
				padding: 0 30rpx;

				.index {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 40rpx;

					text {
						font-size: 40rpx;
					}
				}
			}

			.dian {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.left {
					view {
						margin-bottom: 20rpx;

						text {
							margin-left: 20rpx;
							color: #00aaff;
							font-size: 40rpx;
						}

					}
				}

				.round {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 10rpx;
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					background-color: #aaaaff;

					.roundmin {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						background-color: #0055ff;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column; //换行

						.fenshu {
							color: #fff;
							font-size: 40rpx;
							font-weight: bold;
						}

						.day {
							color: #fff;
							font-size: 20rpx
						}
					}

				}
			}
		}
	}
</style>